<template>
	<view class="container">
		<view class="product-list">
			<view class="product-item" v-for="(item,index) in listData">
				<view class="flex-y-center">
					<view class="cover-box">
						<image :src="item.productImg.split(',')[0] | formatFile" class="cover" mode=""></image>
					</view>

					<view class="product-info">
						<view class="product-name">{{item.productTitle}}</view>
						<view class="gray-text">
							{{item.createTime}} ｜ {{item.province}} {{item.city}}
						</view>
						<view class="flex-x-bet-y-center">
							<text class="price" v-if="item.putType != 3">{{item.showPrice | formatMoney}}</text>
							<view class="price" v-else>
								<view class="" v-if="item.productType == 1">
									{{item.hgProductEquipmentLease.monthRent}}
									<text style="color:#333;font-size: 28rpx;font-weight: normal;">/月</text>
								</view>
								<view class="" v-if="item.productType == 2">
									{{item.hgProductMaterialLease.monthRent}}
									<text style="color:#333;font-size: 28rpx;font-weight: normal;">/月</text>
								</view>
							</view>
							<image v-if="item.isVerify == 1" src="/static/images/icon-checked.png" mode="" class="icon-checked"></image>
						</view>
					</view>
				</view>
				<view class="handle-btns flex-y-center">
					<view class="handle-btn" @tap.stop="edit(item)">编辑</view>
					<view class="handle-btn" @tap.stop="unmount(item)">{{item.status == 1 ? '下架' : '上架'}}</view>
					<view class="handle-btn empty-btn" @tap="setPostage(item)" v-if="item.putType !== 3">设置运费</view>
					<view class="handle-btn empty-btn" @tap="editPrice(item)">改价</view>
					<view class="handle-btn empty-btn" @tap="deleteProduct(item)">删除</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadingStatus" marginTop="30" font-size="28" icon-size="30"></u-loadmore>
	</view>
</template>

<script>
import { productType, sellType } from '../../consts';
import { toast } from '../../utils/uni-api';
import { deleteProduct, getProductList, setPostage, editProduct, changeStatus } from '@/api/product.js'
	export default {
		data() {
			return {
				from: '',
				queryParams:{
					pageNo: 1,
					pageSize: 10,
					isMine: 1,
					putType: 1
				},
				listData: [],
				total: 0,
				loadingStatus: 'loading'
			};
		},
		onLoad(option){
			this.from = option.from || ''
			let title = ''
			if(this.from === 'factory'){
				title = '厂商管理'
				this.queryParams.putType = 1
			}else if(this.from === 'used'){
				title = '二手管理'
				this.queryParams.putType = 2
			}else if(this.from === 'lease'){
				title = '租赁管理'
				this.queryParams.putType = 3
			}
			uni.setNavigationBarTitle({
				title
			})
			if(!uni.getStorageSync('refresh')){
				this.getProductList()
			}
		},
		onShow(){
			if(uni.getStorageSync('refresh')){
				uni.removeStorageSync('refresh')
				this.listData = []
				this.queryParams.pageNo = 1
				this.getProductList()
			}
		},
		onReachBottom(){
			if(this.total > this.listData.length){
				this.queryParams.pageNo++
				this.getProductList()
			}
		},
		methods:{
			edit(item){
				// 出售
				if(item.putType === 1 || item.putType === 2){
					this.$myUni.navTo('/pages/product/form-sell?id=' + item.id)	
				}
				// 出租
				else{
					this.$myUni.navTo('/pages/product/form-rent-out?id=' + item.id)	
				}
			},
			setPostage(item){
				this.$myUni.navTo('/pages/product/form-freight?id=' + item.id)
			},
			deleteProduct(item){
				uni.showModal({
					title:'提示',
					content:'确认删除该商品？',
					success: res => {
						if(res.confirm){
							deleteProduct({id: item.id}).then(res => {
								toast('删除成功', true)
								setTimeout(() => {
									this.listData = []
									this.queryParams.pageNo = 1
									this.getProductList()
								}, 500)
							})
						}
					}
				})
			},
			unmount(item){
				const params = {
					id: item.id,
					status: item.status == 1 ? 2: 1
				}
				changeStatus(params).then(res => {
					toast('操作成功', true)
					setTimeout(() => {
						this.queryParams.pageNo = 1
						this.listData = []
						this.getProductList()
					}, 500)
				})
			},
			editPrice(item){
				if(item.productType === productType.device.value && item.putType === sellType.factory.value){
					this.$myUni.navTo('/pages/product/form-sku?from=editPrice&id=' + item.id)
				}else{
					this.$myUni.navTo('/pages/product/edit-price?id=' + item.id)
				}
			},
			getProductList(){
				this.loadingStatus = 'loading'
				getProductList(this.queryParams).then(res => {
					this.listData.push(...res.result.records)
					this.total = res.result.total
					this.loadingStatus = this.total > this.listData.length ? 'loadmore' : 'nomore'
				})
			}
		}
	}
</script>

<style lang="scss">
	.product-item {
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 30rpx;

		.cover-box {
			position: relative;
			width: 260rpx;
			height: 180rpx;
			border-radius: 10rpx;

			.cover {
				width: 100%;
				height: 100%;
			}

		}

		.product-info {
			flex: 1;
			margin-left: 30rpx;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.product-name {
				font-weight: bold;
				font-size: 31rpx;
				color: #333333;
			}

			.gray-text {
				font-weight: 500;
				font-size: 24rpx;
				color: #787C88;
				padding: 15rpx 0;
			}

			.icon-checked {
				width: 140rpx;
				height: 45rpx;
			}

			.price {
				font-weight: bold;
				font-size: 35rpx;
				color: #F42D1F;
			}
		}
	}

	.handle-btns {
		flex-wrap: wrap;
		margin-right: -30rpx;

		.handle-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 160rpx;
			height: 58rpx;
			background: linear-gradient(180deg, #FEA413, #FE5A13);
			border-radius: 30rpx;
			font-weight: 500;
			font-size: 29rpx;
			color: #FFFFFF;
			border: 1px solid transparent;
			margin-right: 15rpx;
			margin-top: 25rpx;
		}

		.empty-btn {
			border: 1px solid $theme-color;
			color: $theme-color;
			background: #fff;
		}
		
		.handle-btn:nth-of-type(4n){
			margin-right: 0;
		}
	}
</style>